<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>对战管理</title>
    <link rel="stylesheet" th:href="@{../static/layui/css/layui.css}" href="/static/layui/css/layui.css" media="all">


    <!--    <link rel="stylesheet" th:href="@{/css/weadmin.css}">-->
</head>

<body>

<div class="weadmin-block">
    <!--    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i-->
    <!--            class="layui-icon layui-icon-delete"></i>批量删除-->
    <!--    </button>-->
<!--    <a  onclick="add()" class="layui-btn"><i class="layui-icon layui-icon-add-circle-fine"></i>添加对战</a>-->
    <a  onclick="addGame()" class="layui-btn"><i class="layui-icon layui-icon-add-circle-fine"></i>添加比赛

    </a>
</div>

<table class="layui-table" id="test" lay-filter="message"></table>

<script th:src="@{../static/layui/layui.js}"></script>
<script th:src="@{../static/js/eleDel.js}" type="text/javascript"></script>
<script th:src="@{../static/mysource/js/jquery-3.3.1.min.js}"></script>

<script type="text/html" id="btn">
    <!--按钮-->
<!--    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</button>-->
    <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
<!--    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>-->
</script>


<script type="text/javascript">

    layui.use(['table' ,'layer'], function () {
        var table = layui.table;
        var layer = layui.layer;
        //第一个实例

        table.render({
            elem: '#test'
            // , height: 500
            , skin: 'line' //表格风格
            , url: '/game/data' //数据接口
            , page: true //开启分页
            , even: true
            // , id: 'table'
            , toolbar: '#toolbarDemo'//开启自定义工具行，指向自定义工具栏模板选择器
            , defaultToolbar: ['filter', 'print', 'exports']
            , cols: [
                [ //表头
                    {field: 'match_id', title: '比赛ID' , align: 'center', width: 80}
                    , {field: 'mname', title: '比赛名字', align: 'center'}
                    , {field: 'matchAddress', title: '比赛地点', align: 'center'}
                    , {field: 'matchInfo', title: '比赛介绍', align: 'center'}
                    , {field: 'status', title: '大赛状态', align: 'center'}
                    // , {field: 'm_status', title: '比赛状态', align: 'center'}
                    , {field: 'button', title: '操作', width: 200, toolbar: "#btn",align: 'center'}
                ]
            ]
            , limits: [3, 5, 10, 20]
            , limit: 10
            , parseData: function (res) {
                var result;
                // console.log(this);
                // console.log(JSON.stringify(res));
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {"code": res.code, "msg": res.msg, "count": res.count, "data": result};
            },done: function (res){
                $("[data-field='status']").children().each(function(){
                    if($(this).text()=='1'){
                        $(this).text("进行中")
                    }else if($(this).text()=='0'){
                        $(this).text("未开始")
                    }else if($(this).text()=='2'){
                        $(this).text("已结束")
                    }
                })
            }

        });




        //触发事件
        table.on('tool(message)', function (obj) {
            var data1 = obj.data; //获得当前行数据
            // console.log(data1)
            switch (obj.event) {
                case 'del':
                    layer.msg('删除', {icon: 6, anim: 6});

                    table.render()
                    // layui.form.render("select");//重新渲染 固定写法
                    break;
                case 'edit':
                    // layer.msg('编辑', {icon: 6, anim: 6});
                    bb(data1)
                    break;
            }
            ;
        });

        function del(data1) {

        }

        function bb(data1){
            console.log(data1)
            console.log(data1.match_id)
            let mid = data1.match_id;
            layer.open({
                type: 2,
                area: ['600px', '450px'],
                shadeClose: true,
                shade: 0.4,
                title: "编辑对战",
                btn: ['关闭'],
                moveType: 1, //拖拽模式，0或者1
                content: "/game/edit/"+mid,
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: '/match/list'
                    });
                }
            })

        }

    });

    layui.use('layer', function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        add = function (url, id) {
            layer.open({
                type: 2,
                area: ['800px', '600px'],
                shadeClose: true,
                shade: 0.4,
                title: "新增用户",
                btn: ['关闭'],
                moveType: 1, //拖拽模式，0或者1
                content: '/match/add',
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: '/match/list'
                    });
                }
            })

        },
            addGame = function (url, id) {
                layer.open({
                    type: 2,
                    area: ['800px', '600px'],
                    shadeClose: true,
                    shade: 0.4,
                    title: "新增用户",
                    btn: ['关闭'],
                    moveType: 1, //拖拽模式，0或者1
                    content: '/match/addGame',
                    success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: '/match/list'
                        });
                    }
                })

            }

    })


</script>


</body>

</html>